{template 'common/header-base'}
<div class="console-page">
	<div class="console-page__head">
		<a href="{$_W['siteroot']}">
			<img src="{if !empty($_W['setting']['copyright']['flogo'])}{php echo to_global_media($_W['setting']['copyright']['flogo'])}{else}./resource/images/logo/logo-219.png{/if}" class="logo" style="max-height: 40px;">
		</a>
		<div class="skin-2__header">
			<ul class="user-info">
				{template 'common/header-user'}
			</ul>
		</div>
	</div>
	<div class="console-page__body" id="console-bind" ng-controller="consoleBindCtrl" ng-cloak>
	    <h1>绑定应用市场账号</h1>
		<ul class="we7-step">
			<li ng-class="{active: step == 1}"><span class="content">输入手机号</span></li>
			<li ng-class="{active: step == 2}"><span class="content">验证手机号</span> </li>
		</ul>
		<div ng-if="step == 1">
			<div class="alert alert-info">
				<i class="wi wi-info"> </i> <div>管理员已将<span class="color-red">系统客户端移至应用市场微擎控制台</span>，你需要绑定/注册应用市场账号后再访问。请输入绑定的微擎应用市场手机号进行验证；如果没有请直接输入需绑定的手机号，系统将自动注册绑定。</div>
			</div>
			<div class="form we7-form">
				<div class="form-group">
					<label class="col-sm-2 control-label">手机号</label>
					<div class="col-sm-10">
						<input ng-model="data.mobile" type="text" placeholder="请输入手机号" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">验证码</label>
					<div class="col-sm-10">
						<div class="input-group">
							<input id="data.code" ng-model="data.code" type="text" placeholder="验证码" class="form-control">
							<a href="javascript:;" class="input-group-btn">
								<!--<button class="btn btn-primary">发送验证码</button>-->
								<input type="button" class="btn btn-default send-code" ng-disabled="expire != 60 || !data.mobile" ng-click="sendMessage()" value="{{expire == 60 ? '发送验证码' : (expire + '秒后重试')}}">
								<span class="js-timer"></span>
							</a>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"></label>
					<div class="col-sm-10">
						<button class="btn btn-primary" ng-click="verify()" ng-disabled="!data.mobile || !data.code">验证手机号</button>
					</div>
				</div>
			</div>
		</div>

		<div ng-if="step == 2">
			<div class="alert alert-info" ng-if="userInfo.user_name">
				<i class="wi wi-info"> </i> <div>你输入的手机号，经系统验证确认绑定<span class="color-red">{{userInfo.user_name}}</span>的应用市场帐号，请确认绑定信息后，完成绑定操作。</div>
			</div>

			<div class="alert alert-info" ng-if="!userInfo.user_name">
				<i class="wi wi-info"> </i> 你输入的手机号，经系统验证暂无绑定的应用市场账号。你也可以在当前页面直接用此手机号注册应用市场账号。
			</div>
			<div class="form we7-form">
				<div class="form-group" ng-if="userInfo.user_name">
					<label class="col-sm-2 control-label">账号名称</label>
					<div class="col-sm-10 control-label">
						{{userInfo.user_name}}
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">手机号</label>
					<div class="col-sm-10 control-label">
						{{data.mobile}}
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"></label>
					<div class="col-sm-10">
						<button class="btn btn-primary" ng-click="bindConsole()">{{userInfo.user_name ? '立即绑定' : '注册并绑定'}}</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		angular.module('userProfile').value('config',{
			'sendCodeUrl' : "{php echo url('user/third-bind/send')}",
			'verifyUrl' : "{php echo url('user/third-bind/verify_mobile')}",
			'bindUrl' : "{php echo url('user/third-bind/bind_console')}",
			'consoleUrl' : "{php echo url('user/third-bind/console_url', array('type' => 'client'))}",
			step: 1,
		});
		angular.module('userProfile').controller('consoleBindCtrl', ['$scope', '$http', 'config','$interval', function ($scope, $http, config, $interval) {
			$scope.step = config.step;
			$scope.expire = 60;
			$scope.intervalInter = null;
			$scope.data = {
				mobile: '',
				code: ''
			}
			$scope.userInfo = {}
			$scope.sendMessage = function() {
				if(!$scope.data.mobile || !/1[3456789][0-9]{9}/.test($scope.data.mobile)) return;
				$scope.intervalInter && $interval.cancel($scope.intervalInter)
				$http.post(config.sendCodeUrl, {
					mobile: $scope.data.mobile
				})
					.success(function(res) {
						if (res.message.errno == 0) {
							util.message('发送验证码成功', '', 'success');
							$scope.intervalInter = $interval(function() {
								$scope.expire--
								if($scope.expire <=0) {
									$interval.cancel($scope.intervalInter)
									$scope.expire = 60
								}
							}, 1000)
						} else {
							util.message(res.message.message, '', 'error');
						}
					})
			}
			$scope.verify = function() {
				if(!$scope.data.mobile || !$scope.data.code) return false
				$http.post(config.verifyUrl, {
					mobile: $scope.data.mobile,
					code: $scope.data.code
				})
					.success(function (res) {
						if (res.message.errno == 0) {
							$scope.userInfo = res.message.message
							if($scope.userInfo.token) {
								$scope.step = 2
							}
						} else {
							util.message(res.message.message, '', 'error');
						}
					})
			}
			$scope.bindConsole = function() {
				$http.post(config.bindUrl, {
					mobile: $scope.data.mobile,
					token: $scope.userInfo.token,
					username: $scope.userInfo.user_name
				})
					.success(function (res) {
						if (res.message.errno == 0) {
							util.message(res.message.message, '', 'success');
							setTimeout(function(){ window.location.href = config.consoleUrl; }, 3000);
						} else {
							util.message(res.message.message, '', 'error');
						}
					})
			}
		}]);
		angular.bootstrap($('#console-bind'), ['userProfile']);
	</script>
</div>
{template 'common/footer'}
